<template>
    <transition name="move">
        <div class="food" v-show="showFlag" ref="food">
            <div class="food_content">
                <div class="image_header">
                    <img :src="food.image" alt="">
                    <div class="back" @click="hide"><</div>
                </div>
                <div class="content">
                    <h1 class="title">{{food.name}}</h1>
                    <div class="detail">
                        <span class="sell_count">月售{{food.sellCount}}</span>
                        <span class="rating">好评率{{food.rating}}</span>
                    </div>
                    <div class="price">
                        <span class="now">￥{{food.price}}</span>
                        <del class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</del>
                    </div>
                    <div class="cartcontrol-wrapper">
                      <cartcontrol :food="food"></cartcontrol>
                    </div>
                    <transition name="fade">
                      <div class="buy" v-show="!food.count || food.count===0" @click.stop.prevent="addFirst">
                        加入购物车
                      </div>
                    </transition>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import Vue from 'vue';
import BScroll from "better-scroll";
import cartcontrol from "@/components/cartcontrol/cartcontrol.vue";
export default {
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      showFlag: false
    };
  },
  methods: {
    show() {
      this.showFlag = true;
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.food, {
            click: true
          });
        } else {
          this.scroll.refresh();
        }
      });
    },
    hide() {
      this.showFlag = false;
    },
    addFirst(event) {
      if (!event._constructed) {
        return;
      }
      this.$emit('add',event.target);
      Vue.set(this.food, 'count', 1);

    }
  },
  components: {
    cartcontrol
  }
};
</script>

<style scoped>
.food {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 45px;
  z-index: 30;
  width: 100%;
  background: #fff;
  transform: translate3d(0, 0, 0);
}
.food.move-enter-active,
.food.move-leave-active {
  transition: all 0.2s linear;
}

.food.move-enter,
.food.move-leave-active {
  transform: translate3d(100%, 0, 0);
}
.image_header {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
}
.image_header img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image_header .back {
  position: absolute;
  top: 0px;
  left: 0px;
  color: #fff;
  font-size: 20px;
  padding: 10px;
}
.content {
  position: relative;
  padding: 18px;
}
.content .title {
  line-height: 14px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgb(7, 17, 27);
}
.content .detail {
  margin-bottom: 18px;
  line-height: 10px;
  height: 10px;
  font-size: 0;
}
.sell_count,
.rating {
  font-size: 10px;
  color: rgb(147, 153, 159);
}

.sell_count {
  margin-right: 12px;
}

.price {
  font-weight: 700;
  line-height: 24px;
}

.now {
  margin-right: 8px;
  font-size: 14px;
  color: rgb(240, 20, 20);
}

.old {
  text-decoration: line-through;
  font-size: 10px;
  color: rgb(147, 153, 159);
}
.cartcontrol-wrapper {
  position: absolute;
  right: 18px;
  bottom: 18px;
}
.buy {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  height: 24px;
  line-height: 24px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 12px;
  font-size: 10px;
  color: #fff;
  background: rgb(0, 160, 220);
  opacity: 1;
}
.buy.fade-enter-active,
.buy.fade-leave-active {
  transition: all 0.2s;
}
.buy.fade-enter,
.buy.fade-leave-active {
  opacity: 0;
  z-index: -1;
}
</style>
